<ion-content class="content">
  <ion-list lines="none" mode="ios" class="person-info">
    <ion-item [routerLink]="['/person-info']">
      <ion-thumbnail class="chat-image" slot="start">
        <img [src]="photoUrl" class="person-photo">
      </ion-thumbnail>
      <ion-label>
        <h2>聪哥</h2>
        <span>微信号：hncszhangcong</span>
      </ion-label>
      <ion-icon slot="end" name="qr-code-outline"></ion-icon>
    </ion-item>
  </ion-list>

  <div class="sep"></div>

  <ion-list lines="none" mode="ios" class="pay">
    <ion-item [routerLink]="['']">
      <ion-icon slot="start" name="logo-paypal" color="success"></ion-icon>
      <ion-label>
        <h3>支付</h3>
      </ion-label>
    </ion-item>
  </ion-list>

  <div class="sep"></div>

  <ion-list mode="ios" class="other">
    <ion-item [routerLink]="['']">
      <ion-icon slot="start" name="cube-outline" color="tertiary"></ion-icon>
      <ion-label>
        <h3>收藏</h3>
      </ion-label>
    </ion-item>

    <ion-item [routerLink]="['']">
      <ion-icon slot="start" name="globe-outline" color="warning"></ion-icon>
      <ion-label>
        <h3>朋友圈</h3>
      </ion-label>
    </ion-item>

    <ion-item [routerLink]="['']">
      <ion-icon slot="start" name="card-outline" color="danger"></ion-icon>
      <ion-label>
        <h3>卡包</h3>
      </ion-label>
    </ion-item>

    <ion-item [routerLink]="['']">
      <ion-icon slot="start" name="happy-outline" color="medium"></ion-icon>
      <ion-label>
        <h3>表情</h3>
      </ion-label>
    </ion-item>
  </ion-list>

  <div class="sep"></div>

  <ion-list lines="none" mode="ios" class="settings">
    <ion-item [routerLink]="['/settings']">
      <ion-icon slot="start" name="settings-outline" color="primary"></ion-icon>
      <ion-label>
        <h3>设置</h3>
      </ion-label>
    </ion-item>
  </ion-list>
</ion-content>